<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS基本语法</title> 
<style>
.bkg-green{
    background-color:green;
}
.left40{
    left:40px;
}
.right40{
    right: 40px;
}
.top40{
    top:40px;
}
.top0{
    top:0px;
}
div{
    background-color: cadetblue;
    width:200px;
    border:6px solid blue;
}
.pos-rel{
    position: relative;
}
.pos-abs{
    position:absolute;
}
.border{
    border:10px solid red;
}
</style>
</head>

<body>
    <p>这是第一个普通段落</p>
    <p>这是第二个普通段落</p>
    <div class="pos-rel">
        <p>这是第三个普通段落</p>
        <span class="pos-abs bkg-green left40 right40 top40">这是一个绝对定位段落</span>
    </div>
    div外面
</body>
</html>


